<!doctype html>




<html class="theme-next pisces" lang="zh-Hans">
<head>
  <meta charset="UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>



<meta http-equiv="Cache-Control" content="no-transform" />
<meta http-equiv="Cache-Control" content="no-siteapp" />












  
  
    
  
  <link href="//cdn.staticfile.org/fancybox/2.1.5/jquery.fancybox.min.css" rel="stylesheet" type="text/css" />




  
  
  
  

  
    
    
  

  
    
      
    

    
  

  

  
    
      
    

    
  

  
    
      
    

    
  

  
    
    
    <link href="//fonts.lug.ustc.edu.cn/css?family=Monda:300,300italic,400,400italic,700,700italic|Roboto Slab:300,300italic,400,400italic,700,700italic|Lobster Two:300,300italic,400,400italic,700,700italic|PT Mono:300,300italic,400,400italic,700,700italic&subset=latin,latin-ext" rel="stylesheet" type="text/css">
  






  

<link href="//cdn.staticfile.org/font-awesome/4.6.2/css/font-awesome.min.css" rel="stylesheet" type="text/css" />

<link href="/css/main.css?v=5.1.0" rel="stylesheet" type="text/css" />


  <meta name="keywords" content="Web,JavaScript," />








  <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico?v=5.1.0" />






<meta name="description" content="操作符包括算术操作符(如加号和减号)、位操作符、关系操作符和相等操作符。ECMAScript 操作符的与众不同之处在于，它们能够适用于很多值，例如字符串、数字值、布尔值，甚至对象。不过，在应用于对象时，相应的操作符通常都会调用对象的 valueOf()和(或) toString() 方法，以便取得可以操作的值。
一元操作符递增递减操作符执行前置递增和递减操作时，变量的值都是在语句被求值以前改变的。">
<meta property="og:type" content="article">
<meta property="og:title" content="《 JavaScript 高级程序设计》备忘-第三章-2">
<meta property="og:url" content="http://codingme.xyz/2016/09/17/javascript-note-03-2/index.html">
<meta property="og:site_name" content="CodingMe">
<meta property="og:description" content="操作符包括算术操作符(如加号和减号)、位操作符、关系操作符和相等操作符。ECMAScript 操作符的与众不同之处在于，它们能够适用于很多值，例如字符串、数字值、布尔值，甚至对象。不过，在应用于对象时，相应的操作符通常都会调用对象的 valueOf()和(或) toString() 方法，以便取得可以操作的值。
一元操作符递增递减操作符执行前置递增和递减操作时，变量的值都是在语句被求值以前改变的。">
<meta property="og:updated_time" content="2016-10-04T06:00:03.319Z">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="《 JavaScript 高级程序设计》备忘-第三章-2">
<meta name="twitter:description" content="操作符包括算术操作符(如加号和减号)、位操作符、关系操作符和相等操作符。ECMAScript 操作符的与众不同之处在于，它们能够适用于很多值，例如字符串、数字值、布尔值，甚至对象。不过，在应用于对象时，相应的操作符通常都会调用对象的 valueOf()和(或) toString() 方法，以便取得可以操作的值。
一元操作符递增递减操作符执行前置递增和递减操作时，变量的值都是在语句被求值以前改变的。">



<script type="text/javascript" id="hexo.configurations">
  var NexT = window.NexT || {};
  var CONFIG = {
    root: '/',
    scheme: 'Pisces',
    sidebar: {"position":"right","display":"post"},
    fancybox: true,
    motion: false,
    duoshuo: {
      userId: '0',
      author: '博主'
    },
    algolia: {
      applicationID: '',
      apiKey: '',
      indexName: '',
      hits: {"per_page":10},
      labels: {"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}
    }
  };
</script>



  <link rel="canonical" href="http://codingme.xyz/2016/09/17/javascript-note-03-2/"/>





  <title> 《 JavaScript 高级程序设计》备忘-第三章-2 | CodingMe </title>
</head>

<body itemscope itemtype="http://schema.org/WebPage" lang="zh-Hans">

  










  
  
    
  

  <div class="container one-collumn sidebar-position-right page-post-detail ">
    <div class="headband"></div>

    <header id="header" class="header" itemscope itemtype="http://schema.org/WPHeader">
      <div class="header-inner"><div class="site-meta ">
  

  <div class="custom-logo-site-title">
    <a href="/"  class="brand" rel="start">
      <span class="logo-line-before"><i></i></span>
      <span class="site-title">CodingMe</span>
      <span class="logo-line-after"><i></i></span>
    </a>
  </div>
  <p class="site-subtitle"></p>
</div>

<div class="site-nav-toggle">
  <button>
    <span class="btn-bar"></span>
    <span class="btn-bar"></span>
    <span class="btn-bar"></span>
  </button>
</div>

<nav class="site-nav">
  

  
    <ul id="menu" class="menu">
      
        
        <li class="menu-item menu-item-home">
          <a href="/" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-home"></i> <br />
            
            首页
          </a>
        </li>
      
        
        <li class="menu-item menu-item-about">
          <a href="/about" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-user"></i> <br />
            
            关于
          </a>
        </li>
      
        
        <li class="menu-item menu-item-archives">
          <a href="/archives" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-archive"></i> <br />
            
            归档
          </a>
        </li>
      
        
        <li class="menu-item menu-item-tags">
          <a href="/tags" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-tags"></i> <br />
            
            标签
          </a>
        </li>
      
        
        <li class="menu-item menu-item-categories">
          <a href="/categories" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-th"></i> <br />
            
            分类
          </a>
        </li>
      

      
        <li class="menu-item menu-item-search">
          
            <a href="javascript:;" class="popup-trigger">
          
            
              <i class="menu-item-icon fa fa-search fa-fw"></i> <br />
            
            搜索
          </a>
        </li>
      
    </ul>
  

  
    <div class="site-search">
      
  <div class="popup">
 <span class="search-icon fa fa-search"></span>
 <input type="text" id="local-search-input">
 <div id="local-search-result"></div>
 <span class="popup-btn-close">close</span>
</div>


    </div>
  
</nav>



 </div>
    </header>

    <main id="main" class="main">
      <div class="main-inner">
        <div class="content-wrap">
          <div id="content" class="content">
            

  <div id="posts" class="posts-expand">
    

  

  
  
  

  <article class="post post-type-normal " itemscope itemtype="http://schema.org/Article">
  <link itemprop="mainEntityOfPage" href="http://codingme.xyz/2016/09/17/javascript-note-03-2/">

  <span style="display:none" itemprop="author" itemscope itemtype="http://schema.org/Person">
    <meta itemprop="name" content="Huang SJ">
    <meta itemprop="description" content="">
    <meta itemprop="image" content="/uploads/avatar.jpg">
  </span>

  <span style="display:none" itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
    <meta itemprop="name" content="CodingMe">
    <span style="display:none" itemprop="logo" itemscope itemtype="http://schema.org/ImageObject">
      <img style="display:none;" itemprop="url image" alt="CodingMe" src="">
    </span>
  </span>

    
      <header class="post-header">

        
        
          <h1 class="post-title" itemprop="name headline">
            
            
              
                《 JavaScript 高级程序设计》备忘-第三章-2
              
            
          </h1>
        

        <div class="post-meta">
          <span class="post-time">
            

            

            
          </span>

          

          
            
          

          

          
          

          

          

        </div>
      </header>
    


    <div class="post-body" itemprop="articleBody">

      
      

      
        <h1 id="操作符"><a href="#操作符" class="headerlink" title="操作符"></a>操作符</h1><p>包括算术操作符(如加号和减号)、位操作符、关系操作符和相等操作符。<br>ECMAScript 操作符的与众不同之处在于，它们能够适用于很多值，例如字符串、数字值、布尔值，甚至对象。<br>不过，<strong>在应用于对象时，相应的操作符通常都会调用对象的 valueOf()和(或) toString() 方法，以便取得可以操作的值。</strong></p>
<h2 id="一元操作符"><a href="#一元操作符" class="headerlink" title="一元操作符"></a>一元操作符</h2><h3 id="递增递减操作符"><a href="#递增递减操作符" class="headerlink" title="递增递减操作符"></a>递增递减操作符</h3><p>执行前置递增和递减操作时，变量的值都是在语句被求值以前改变的。(在计算机科学领域，这种情况通常被称作副效应。)</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">var</span> age = <span class="number">29</span>;</div><div class="line"><span class="keyword">var</span> anotherAge = --age + <span class="number">2</span>;</div><div class="line">alert(age); <span class="comment">// 输出 28</span></div><div class="line">alert(anotherAge); <span class="comment">// 输出 30</span></div></pre></td></tr></table></figure>
<p>后置递增和递减与前置递增和递减有一个非常重要的区别，即递增和递减操作是在包含它们的语句被求值之后才执行的。</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">var</span> num1 = <span class="number">2</span>;</div><div class="line"><span class="keyword">var</span> num2 = <span class="number">20</span>;</div><div class="line"><span class="keyword">var</span> num3 = num1-- + num2; <span class="comment">//  等于 22</span></div><div class="line"><span class="keyword">var</span> num4 = num1 + num2; <span class="comment">// 等于 21</span></div></pre></td></tr></table></figure>
<p>作用数据类型时候，等同于先 Number() 再加减1，会像 Number() 转型函数一样对这个值执行转换。</p>
<a id="more"></a>
<h3 id="一元加操作符"><a href="#一元加操作符" class="headerlink" title="一元加操作符"></a>一元加操作符</h3><p>对数值不会产生任何影响。<br>对非数值应用一元加操作符时，该操作符会像 Number() 转型函数一样对这个值执行转换。<br>所以<strong>疑问</strong>：一元加操作符乃至于递增递减操作符和 Number() 有什么关系？感觉好像都会经由 Number() 转换。</p>
<h3 id="一元减操作符"><a href="#一元减操作符" class="headerlink" title="一元减操作符"></a>一元减操作符</h3><p>对数值会让其变成其负数。<br>对非数值跟一元加操作符相同，最后再转换成负数。</p>
<h2 id="位操作符"><a href="#位操作符" class="headerlink" title="位操作符"></a>位操作符</h2><p>ECMAScript 中的所有数值都以 IEEE-754 64 位格式存储，但位操作符并不直接操作 64 位的值。<br>而是先将 64 位的值转换成 32 位的整数，然后执行操作，最后再将结果转换回 64 位。<br>对于开发人员来说，由于 64 位存储格式是透明的，因此整个过程就像是只存在 32 位的整数一样。</p>
<p>对于有符号的整数，32 位中的前 31 位用于表示整数的值。第 32 位用于表示数值的符号：0 表示正数，1 表示负数。<br>这个表示符号的位叫做符号位，符号位的值决定了其他位数值的格式。<br>正数以纯二进制格式存储，31 位中的每一位都表示 2 的幂。<br>负数同样以二进制码存储，但使用的格式是二进制补码。<br>这个转换过程也导致了一个严重的副效应，即在<strong>对特殊的 NaN 和 Infinity 值应用位操作时，这两个值都会被当成 0 来处理。</strong></p>
<h3 id="按位非-NOT"><a href="#按位非-NOT" class="headerlink" title="按位非 NOT"></a>按位非 NOT</h3><p>按位非操作符由一个波浪线(~)表示。</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">var</span> num1 = <span class="number">25</span>; <span class="comment">// 二进制 00000000000000000000000000011001</span></div><div class="line"><span class="keyword">var</span> num2 = ~num1; <span class="comment">// 二进制 11111111111111111111111111100110</span></div><div class="line">alert(num2); <span class="comment">// -26</span></div></pre></td></tr></table></figure>
<h3 id="按位与-AND"><a href="#按位与-AND" class="headerlink" title="按位与 AND"></a>按位与 AND</h3><p>按位与操作符由一个和号字符( &amp; )表示。</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">var</span> result = <span class="number">25</span> &amp; <span class="number">3</span>;</div><div class="line">alert(result); <span class="comment">//1</span></div></pre></td></tr></table></figure>
<h3 id="按位或-OR"><a href="#按位或-OR" class="headerlink" title="按位或 OR"></a>按位或 OR</h3><p>按位或操作符由一个竖线符号(|)表示。</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">var</span> result = <span class="number">25</span> | <span class="number">3</span>;</div><div class="line">alert(result); <span class="comment">//27</span></div></pre></td></tr></table></figure>
<h3 id="按位异或-XOR"><a href="#按位异或-XOR" class="headerlink" title="按位异或 XOR"></a>按位异或 XOR</h3><p>按位异或操作符由一个插入符号(^)表示。</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">var</span> result = <span class="number">25</span> ^ <span class="number">3</span>;</div><div class="line">alert(result); <span class="comment">//26</span></div></pre></td></tr></table></figure>
<h3 id="左移"><a href="#左移" class="headerlink" title="左移"></a>左移</h3><p>左移操作符由两个小于号(&lt;&lt;)表示。</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">var</span> oldValue = <span class="number">2</span>; <span class="comment">// 等于二进制的 10</span></div><div class="line"><span class="keyword">var</span> newValue = oldValue &lt;&lt; <span class="number">5</span>; <span class="comment">// 等于二进制的 1000000，十进制的 64</span></div></pre></td></tr></table></figure>
<p>注意，左移不会影响操作数的符号位。换句话说，如果将-2向左移动 5位，结果将是-64，而非 64。<br><strong>也就是说，符号位是不会有变化，而是符号位右边的位会变化</strong></p>
<h3 id="有符号右移"><a href="#有符号右移" class="headerlink" title="有符号右移"></a>有符号右移</h3><p>有符号的右移操作符由两个大于号(&gt;&gt;)表示。<br>会将数值向右移动，但保留符号位。<br> ECMAScript 会用符号位的值来填充所有空位。<br> <strong>即如果是负数的话，填充空位用的是1，反之为0</strong></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">var</span> oldValue = <span class="number">64</span>; <span class="comment">// 等于二进制的 1000000</span></div><div class="line"><span class="keyword">var</span> newValue = oldValue &gt;&gt; <span class="number">5</span>; <span class="comment">// 等于二进制的 10 ，即十进制的 2</span></div></pre></td></tr></table></figure>
<h3 id="无符号右移"><a href="#无符号右移" class="headerlink" title="无符号右移"></a>无符号右移</h3><p>无符号右移操作符由 3 个大于号(&gt;&gt;&gt;)表示。<br>对正数来说，无符号右移的结果与有符号右移相同。<br>无符号右移是以 0 来填充空位，而不是像有符号右移那样以符号位的值来填充空位。</p>
<p>无符号右移操作符会把负数的二进制码当成正数的二进制码。而且，由于负数以其绝对值的二进制补码形式表示，因此就会导致无符号右移后的结果非常之大。<strong>(填充了无数个0，反码计算回去，十进制的数字无限大)</strong></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">var</span> oldValue = <span class="number">-64</span>; <span class="comment">//  等于二进制的 11111111111111111111111111000000</span></div><div class="line"><span class="keyword">var</span> newValue = oldValue &gt;&gt;&gt; <span class="number">5</span>; <span class="comment">// 等于十进制的 134217726</span></div></pre></td></tr></table></figure>
<h3 id="无符号左移"><a href="#无符号左移" class="headerlink" title="无符号左移"></a>无符号左移</h3><p>无符号右移操作符由 3 个大于号(&gt;&gt;&gt;)表示。<br>对负数来说，无符号右移是以 0 来填充空位，其次，无符号右移操作符会把负数的二进制码当成正数的二进制码。</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">var</span> oldValue = <span class="number">-64</span>; <span class="comment">//  等于二进制的 11111111111111111111111111000000</span></div><div class="line"><span class="keyword">var</span> newValue = oldValue &gt;&gt;&gt; <span class="number">5</span>; <span class="comment">// 等于十进制的 134217726</span></div></pre></td></tr></table></figure>
<h2 id="布尔操作符"><a href="#布尔操作符" class="headerlink" title="布尔操作符"></a>布尔操作符</h2><h3 id="逻辑非"><a href="#逻辑非" class="headerlink" title="逻辑非"></a>逻辑非</h3><p>逻辑非操作符由一个叹号(！)表示，可以应用于 ECMAScript 中的任何值。</p>
<ul>
<li>如果操作数是一个对象，返回 false ；</li>
<li>如果操作数是一个空字符串，返回 true ；</li>
<li>如果操作数是一个非空字符串，返回 false ；</li>
<li>如果操作数是数值 0，返回 true ；</li>
<li>如果操作数是任意非 0 数值(包括 Infinity )，返回 false ；</li>
<li>如果操作数是 null ，返回 true ；</li>
<li>如果操作数是 NaN ，返回 true ；</li>
<li>如果操作数是 undefined ，返回 true 。</li>
</ul>
<p>同时使用两个逻辑非操作符，实际上就会模拟 Boolean() 转型函数的行为。</p>
<h3 id="逻辑与"><a href="#逻辑与" class="headerlink" title="逻辑与"></a>逻辑与</h3><p>逻辑与操作符由两个和号( &amp;&amp; )表示。</p>
<ol>
<li>如果第一个操作数是对象，则返回第二个操作数；</li>
<li>如果第二个操作数是对象，则只有在第一个操作数的求值结果为 true 的情况下才会返回该对象；</li>
<li>如果两个操作数都是对象，则返回第二个操作数；</li>
<li>如果有一个操作数是 null ，则返回 null ；</li>
<li>如果有一个操作数是 NaN ，则返回 NaN ；</li>
<li>如果有一个操作数是 undefined ，则返回 undefined 。</li>
</ol>
<p><strong>短路操作符</strong>：如果第一个操作数的求值结果为 true ，就不会对第二个操作数求值了。</p>
<h3 id="逻辑或"><a href="#逻辑或" class="headerlink" title="逻辑或"></a>逻辑或</h3><p>逻辑或操作符由两个竖线符号( || )表示。</p>
<ol>
<li>同 逻辑与 第一条。</li>
</ol>
<ul>
<li>如果第一个操作数的求值结果为 false ，则返回第二个操作数；</li>
<li>如果两个操作数都是对象，则返回第一个操作数；</li>
<li>如果两个操作数都是 null ，则返回 null ；</li>
<li>如果两个操作数都是 NaN ，则返回 NaN ；</li>
<li>如果两个操作数都是 undefined ，则返回 undefined 。</li>
</ul>
<p>同样是<strong>短路操作符</strong>。</p>
<h4 id="使用范例"><a href="#使用范例" class="headerlink" title="使用范例"></a>使用范例</h4><p>利用逻辑或的这一行为来避免为变量赋 null 或 undefined 值。 ECMAScript 程序的赋值语句经常会使用这种模式。</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">var</span> myObject = preferredObject || backupObject;</div></pre></td></tr></table></figure>
<h2 id="乘性操作符"><a href="#乘性操作符" class="headerlink" title="乘性操作符"></a>乘性操作符</h2><p>乘法、除法和求模。<br>如果参与乘性计算的某个操作数不是数值，后台会先使用 Number() 转型函数将其转换为数值。</p>
<h3 id="乘法"><a href="#乘法" class="headerlink" title="乘法"></a>乘法</h3><ol>
<li>如果操作数都是数值，执行常规的乘法计算，即两个正数或两个负数相乘的结果还是正数，而如果只有一个操作数有符号，那么结果就是数。如果乘积超过了 ECMAScript 数值的表示范围，则返回 Infinity 或 -Infinity ；</li>
<li>如果有一个操作数是 NaN ，则结果是 NaN ；</li>
<li>如果是 Infinity 与 0 相乘，则结果是 NaN ；</li>
<li>如果是 Infinity 与非 0 数值相乘，则结果是 Infinity 或 -Infinity ，取决于有符号操作数的符号；</li>
<li>如果是 Infinity 与 Infinity 相乘，则结果是 Infinity ；</li>
<li>如果有一个操作数不是数值，则在后台调用 Number() 将其转换为数值，然后再应用上面的规则。</li>
</ol>
<h3 id="除法"><a href="#除法" class="headerlink" title="除法"></a>除法</h3><ul>
<li>同 乘法 第一条；</li>
<li>同 乘法 第二条；</li>
<li>同 乘法 第五条；</li>
<li>如果是零被零除，则结果是 NaN ；</li>
<li>如果是非零的有限数被零除，则结果是 Infinity 或 -Infinity ，取决于有符号操作数的符号；</li>
<li>如果是 Infinity 被任何非零数值除，则结果是 Infinity 或 -Infinity ，取决于有符号操作数的符号；</li>
<li>同 乘法 第六条。</li>
</ul>
<h3 id="求模"><a href="#求模" class="headerlink" title="求模"></a>求模</h3><ol>
<li>如果操作数都是数值，执行常规的除法计算，返回除得的余数；</li>
<li>如果被除数是无穷大值而除数是有限大的数值，则结果是 NaN ；</li>
<li>如果被除数是有限大的数值而除数是零，则结果是 NaN ；</li>
<li>如果是 Infinity 被 Infinity 除，则结果是 NaN ；</li>
<li>如果被除数是有限大的数值而除数是无穷大的数值，则结果是被除数；</li>
<li>如果被除数是零，则结果是零； 0%？</li>
<li>同 乘法 第六条。</li>
</ol>
<h2 id="加性操作符"><a href="#加性操作符" class="headerlink" title="加性操作符"></a>加性操作符</h2><h3 id="加法"><a href="#加法" class="headerlink" title="加法"></a>加法</h3><ul>
<li>如果有一个操作数是 NaN ，则结果是 NaN ；</li>
<li>如果是 Infinity 加 Infinity ，则结果是 Infinity ；</li>
<li>如果是 -Infinity 加 -Infinity ，则结果是 -Infinity ；</li>
<li>如果是 Infinity 加 -Infinity ，则结果是 NaN ；</li>
<li>如果是+0 加+0，则结果是+0；</li>
<li>如果是-0 加-0，则结果是-0；</li>
<li>如果是+0 加-0，则结果是+0。</li>
</ul>
<p>如果有一个操作数是字符串，则：</p>
<ul>
<li>如果两个操作数都是字符串，则将第二个操作数与第一个操作数拼接起来；</li>
<li>如果只有一个操作数是字符串，则将另一个操作数转换为字符串，然后再将两个字符串拼接起来。</li>
</ul>
<p>忽视加法操作中的数据类型是 ECMAScript 编程中最常见的一个错误。</p>
<h3 id="减法"><a href="#减法" class="headerlink" title="减法"></a>减法</h3><ul>
<li>同 加法 第一条；</li>
<li>如果是 Infinity 减 Infinity ，则结果是 NaN ；</li>
<li>如果是 -Infinity 减 -Infinity ，则结果是 NaN ；</li>
<li>如果是 Infinity 减 -Infinity ，则结果是 Infinity ；</li>
<li>如果是 -Infinity 减 Infinity ，则结果是 -Infinity ；</li>
<li>如果是+0 减+0，则结果是+0；</li>
<li>如果是+0 减-0，则结果是-0；</li>
<li>如果是-0 减-0，则结果是+0；</li>
<li>如果有一个操作数是字符串、布尔值、 null 或 undefined ，则先在后台调用 Number() 函数将其转换为数值，然后再根据前面的规则执行减法计算。如果转换的结果是 NaN ，则减法的结果就是 NaN ；</li>
<li>如果有一个操作数是对象，则调用对象的 valueOf() 方法以取得表示该对象的数值。如果得到的值是 NaN ，则减法的结果就是 NaN 。如果对象没有 valueOf() 方法，则调用其 toString()方法并将得到的字符串转换为数值。</li>
</ul>
<h2 id="关系操作符"><a href="#关系操作符" class="headerlink" title="关系操作符"></a>关系操作符</h2><ul>
<li>如果两个操作数都是字符串，则比较两个字符串对应的字符编码值。</li>
<li>如果一个操作数是数值，则将另一个操作数转换为一个数值，然后执行数值比较。</li>
<li>如果一个操作数是对象，则调用这个对象的 valueOf() 方法，用得到的结果按照前面的规则执行比较。如果对象没有 valueOf() 方法，则调用 toString() 方法，并用得到的结果根据前面的规则执行比较。</li>
<li>如果一个操作数是布尔值，则先将其转换为数值，然后再执行比较。</li>
</ul>
<p>有趣的例子：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">var</span> result = <span class="string">"a"</span> &lt; <span class="number">3</span>; <span class="comment">// false ，因为"a"被转换成了 NaN</span></div></pre></td></tr></table></figure>
<p>由于字母 “a” 不能转换成合理的数值，因此就被转换成了 NaN 。根据规则，任何操作数与 NaN 进行关系比较，结果都是 false 。</p>
<h2 id="相等操作符"><a href="#相等操作符" class="headerlink" title="相等操作符"></a>相等操作符</h2><p>由于相等和不相等操作符存在类型转换问题，<strong>而为了保持代码中数据类型的完整性，我们推荐使用全等和不全等操作符。</strong></p>
<h3 id="相等和不相等——先转换再比较"><a href="#相等和不相等——先转换再比较" class="headerlink" title="相等和不相等——先转换再比较"></a>相等和不相等——先转换再比较</h3><p>相等操作符由两个等于号( == )表示，不相等操作符由叹号后跟等于号( != )表示。<br>这两个操作符都会先转换操作数(通常称为强制转型)，然后再比较它们的相等性。</p>
<ul>
<li>如果有一个操作数是布尔值，则在比较相等性之前先将其转换为数值—— false 转换为 0，而 true 转换为 1；</li>
<li>如果一个操作数是字符串，另一个操作数是数值，在比较相等性之前先将字符串转换为数值；</li>
<li>如果一个操作数是对象，另一个操作数不是，则调用对象的 valueOf() 方法，用得到的基本类型值按照前面的规则进行比较；</li>
</ul>
<p>这两个操作符在进行比较时则要遵循下列规则。</p>
<ul>
<li>null 和 undefined 是相等的。</li>
<li>要比较相等性之前，不能将 null 和 undefined 转换成其他任何值。</li>
<li>如果有一个操作数是 NaN ，则相等操作符返回 false ，而不相等操作符返回 true 。重要提示：即使两个操作数都是 NaN ，相等操作符也返回 false ；因为按照规则， NaN 不等于 NaN 。</li>
<li>如果两个操作数都是对象，则比较它们是不是同一个对象。如果两个操作数都指向同一个对象，则相等操作符返回 true ；否则，返回 false 。</li>
</ul>
<h3 id="全等和不全等——仅比较而不转换"><a href="#全等和不全等——仅比较而不转换" class="headerlink" title="全等和不全等——仅比较而不转换"></a>全等和不全等——仅比较而不转换</h3><p>全等操作符由 3 个等于号( === )表示，不全等操作符由一个叹号后跟两个等于号( !== )表示。</p>
<h2 id="条件操作符"><a href="#条件操作符" class="headerlink" title="条件操作符"></a>条件操作符</h2><p>条件操作符应该算是 ECMAScript 中最灵活的一种操作符了，而且它遵循与 Java 中的条件操作符相同的语法形式。</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">variable = boolean_expression ? true_value : false_value;</div></pre></td></tr></table></figure>
<p>本质上，这行代码的含义就是基于对 <code>boolean_expression</code> 求值的结果，决定给变量 <code>variable</code>赋什么值。如果求值结果为 <code>true</code> ，则给变量 <code>variable</code> 赋 <code>true_value</code> 值；如果求值结果为<code>false</code> ，则给变量 <code>variable</code> 赋 <code>false_value</code> 值。</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">var</span> max = (num1 &gt; num2) ? num1 : num2;</div></pre></td></tr></table></figure>
<p>在这个例子中， max 中将会保存一个最大的值。这个表达式的意思是：如果 num1 大于 num2 (关系表达式返回 true )，则将 num1 的值赋给 max ；如果 num1 小于或等于 num2 (关系表达式返回 false )，则将 num2 的值赋给 max 。</p>
<h2 id="赋值操作符"><a href="#赋值操作符" class="headerlink" title="赋值操作符"></a>赋值操作符</h2><p>简单的赋值操作符由等于号( = )表示。</p>
<ul>
<li>乘/赋值( *= )；</li>
<li>除/赋值( /= )；</li>
<li>模/赋值( %= )；</li>
<li>加/赋值( += )；</li>
<li>减/赋值( -= )；</li>
<li>左移/赋值( &lt;&lt;= )；</li>
<li>有符号右移/赋值( &gt;&gt;= )；</li>
<li>无符号右移/赋值( &gt;&gt;&gt;= )。</li>
</ul>
<p>设计这些操作符的主要目的就是简化赋值操作。使用它们不会带来任何性能的提升。</p>
<h2 id="逗号操作符"><a href="#逗号操作符" class="headerlink" title="逗号操作符"></a>逗号操作符</h2><p>使用逗号操作符可以在一条语句中执行多个操作。</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">var</span> num1=<span class="number">1</span>, num2=<span class="number">2</span>, num3=<span class="number">3</span>;</div></pre></td></tr></table></figure>
<p>逗号操作符多用于声明多个变量；但除此之外，逗号操作符还可以用于赋值。在用于赋值时，逗号操作符总会返回表达式中的最后一项。</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">var</span> num = (<span class="number">5</span>, <span class="number">1</span>, <span class="number">4</span>, <span class="number">8</span>, <span class="number">0</span>); <span class="comment">// num 的值为 0</span></div></pre></td></tr></table></figure>

      
    </div>

    <div>
      
        

      
    </div>

    <div>
      
        

      
    </div>


    <footer class="post-footer">
      
        <div class="post-tags">
          
            <a href="/tags/Web/" rel="tag"># Web</a>
          
            <a href="/tags/JavaScript/" rel="tag"># JavaScript</a>
          
        </div>
      

      
        <div class="post-nav">
          <div class="post-nav-next post-nav-item">
            
              <a href="/2016/09/11/javascript-note-03-1/" rel="next" title="《 JavaScript 高级程序设计》备忘-第三章-1">
                <i class="fa fa-chevron-left"></i> 《 JavaScript 高级程序设计》备忘-第三章-1
              </a>
            
          </div>

          <span class="post-nav-divider"></span>

          <div class="post-nav-prev post-nav-item">
            
              <a href="/2016/09/17/javascript-note-03-3/" rel="prev" title="《 JavaScript 高级程序设计》备忘-第三章-3">
                《 JavaScript 高级程序设计》备忘-第三章-3 <i class="fa fa-chevron-right"></i>
              </a>
            
          </div>
        </div>
      

      
      
    </footer>
  </article>



    <div class="post-spread">
      
    </div>
  </div>


          </div>
          


          
  <div class="comments" id="comments">
    
  </div>


        </div>
        
          
  
  <div class="sidebar-toggle">
    <div class="sidebar-toggle-line-wrap">
      <span class="sidebar-toggle-line sidebar-toggle-line-first"></span>
      <span class="sidebar-toggle-line sidebar-toggle-line-middle"></span>
      <span class="sidebar-toggle-line sidebar-toggle-line-last"></span>
    </div>
  </div>

  <aside id="sidebar" class="sidebar">
    <div class="sidebar-inner">

      

      
        <ul class="sidebar-nav motion-element">
          <li class="sidebar-nav-toc sidebar-nav-active" data-target="post-toc-wrap" >
            文章目录
          </li>
          <li class="sidebar-nav-overview" data-target="site-overview">
            站点概览
          </li>
        </ul>
      

      <section class="site-overview sidebar-panel">
        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
          <img class="site-author-image" itemprop="image"
               src="/uploads/avatar.jpg"
               alt="Huang SJ" />
          <p class="site-author-name" itemprop="name">Huang SJ</p>
          <p class="site-description motion-element" itemprop="description"></p>
        </div>
        <nav class="site-state motion-element">
          <div class="site-state-item site-state-posts">
            <a href="/archives">
              <span class="site-state-item-count">75</span>
              <span class="site-state-item-name">日志</span>
            </a>
          </div>

          
            <div class="site-state-item site-state-categories">
              <a href="/categories">
                <span class="site-state-item-count">4</span>
                <span class="site-state-item-name">分类</span>
              </a>
            </div>
          

          
            <div class="site-state-item site-state-tags">
              <a href="/tags">
                <span class="site-state-item-count">9</span>
                <span class="site-state-item-name">标签</span>
              </a>
            </div>
          

        </nav>

        

        <div class="links-of-author motion-element">
          
            
              <span class="links-of-author-item">
                <a href="https://github.com/hsj1992" target="_blank" title="GitHub">
                  
                    <i class="fa fa-fw fa-github"></i>
                  
                  GitHub
                </a>
              </span>
            
              <span class="links-of-author-item">
                <a href="https://twitter.com/hsj9527" target="_blank" title="Twitter">
                  
                    <i class="fa fa-fw fa-twitter"></i>
                  
                  Twitter
                </a>
              </span>
            
              <span class="links-of-author-item">
                <a href="http://weibo.com/u/1694147905" target="_blank" title="Weibo">
                  
                    <i class="fa fa-fw fa-weibo"></i>
                  
                  Weibo
                </a>
              </span>
            
              <span class="links-of-author-item">
                <a href="https://www.freecodecamp.cn/hsj1992" target="_blank" title="FreeCodeCamp">
                  
                    <i class="fa fa-fw fa-fire"></i>
                  
                  FreeCodeCamp
                </a>
              </span>
            
              <span class="links-of-author-item">
                <a href="http://codepen.io/hsj1992/" target="_blank" title="codepen">
                  
                    <i class="fa fa-fw fa-codepen"></i>
                  
                  codepen
                </a>
              </span>
            
              <span class="links-of-author-item">
                <a href="http://hsj1992.oschina.io/" target="_blank" title="码云镜像">
                  
                    <i class="fa fa-fw fa-code"></i>
                  
                  码云镜像
                </a>
              </span>
            
              <span class="links-of-author-item">
                <a href="https://hsj1992.coding.me/" target="_blank" title="coding镜像">
                  
                    <i class="fa fa-fw fa-code"></i>
                  
                  coding镜像
                </a>
              </span>
            
              <span class="links-of-author-item">
                <a href="https://hsj1992.github.io/" target="_blank" title="github镜像">
                  
                    <i class="fa fa-fw fa-code"></i>
                  
                  github镜像
                </a>
              </span>
            
              <span class="links-of-author-item">
                <a href="https://codingme-6dd8a.firebaseapp.com" target="_blank" title="Firebase镜像">
                  
                    <i class="fa fa-fw fa-google"></i>
                  
                  Firebase镜像
                </a>
              </span>
            
          
        </div>

        
        

        
        

        


      </section>

      
      <!--noindex-->
        <section class="post-toc-wrap motion-element sidebar-panel sidebar-panel-active">
          <div class="post-toc">

            
              
            

            
              <div class="post-toc-content"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#操作符"><span class="nav-number">1.</span> <span class="nav-text">操作符</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#一元操作符"><span class="nav-number">1.1.</span> <span class="nav-text">一元操作符</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#递增递减操作符"><span class="nav-number">1.1.1.</span> <span class="nav-text">递增递减操作符</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#一元加操作符"><span class="nav-number">1.1.2.</span> <span class="nav-text">一元加操作符</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#一元减操作符"><span class="nav-number">1.1.3.</span> <span class="nav-text">一元减操作符</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#位操作符"><span class="nav-number">1.2.</span> <span class="nav-text">位操作符</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#按位非-NOT"><span class="nav-number">1.2.1.</span> <span class="nav-text">按位非 NOT</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#按位与-AND"><span class="nav-number">1.2.2.</span> <span class="nav-text">按位与 AND</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#按位或-OR"><span class="nav-number">1.2.3.</span> <span class="nav-text">按位或 OR</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#按位异或-XOR"><span class="nav-number">1.2.4.</span> <span class="nav-text">按位异或 XOR</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#左移"><span class="nav-number">1.2.5.</span> <span class="nav-text">左移</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#有符号右移"><span class="nav-number">1.2.6.</span> <span class="nav-text">有符号右移</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#无符号右移"><span class="nav-number">1.2.7.</span> <span class="nav-text">无符号右移</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#无符号左移"><span class="nav-number">1.2.8.</span> <span class="nav-text">无符号左移</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#布尔操作符"><span class="nav-number">1.3.</span> <span class="nav-text">布尔操作符</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#逻辑非"><span class="nav-number">1.3.1.</span> <span class="nav-text">逻辑非</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#逻辑与"><span class="nav-number">1.3.2.</span> <span class="nav-text">逻辑与</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#逻辑或"><span class="nav-number">1.3.3.</span> <span class="nav-text">逻辑或</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#使用范例"><span class="nav-number">1.3.3.1.</span> <span class="nav-text">使用范例</span></a></li></ol></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#乘性操作符"><span class="nav-number">1.4.</span> <span class="nav-text">乘性操作符</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#乘法"><span class="nav-number">1.4.1.</span> <span class="nav-text">乘法</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#除法"><span class="nav-number">1.4.2.</span> <span class="nav-text">除法</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#求模"><span class="nav-number">1.4.3.</span> <span class="nav-text">求模</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#加性操作符"><span class="nav-number">1.5.</span> <span class="nav-text">加性操作符</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#加法"><span class="nav-number">1.5.1.</span> <span class="nav-text">加法</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#减法"><span class="nav-number">1.5.2.</span> <span class="nav-text">减法</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#关系操作符"><span class="nav-number">1.6.</span> <span class="nav-text">关系操作符</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#相等操作符"><span class="nav-number">1.7.</span> <span class="nav-text">相等操作符</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#相等和不相等——先转换再比较"><span class="nav-number">1.7.1.</span> <span class="nav-text">相等和不相等——先转换再比较</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#全等和不全等——仅比较而不转换"><span class="nav-number">1.7.2.</span> <span class="nav-text">全等和不全等——仅比较而不转换</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#条件操作符"><span class="nav-number">1.8.</span> <span class="nav-text">条件操作符</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#赋值操作符"><span class="nav-number">1.9.</span> <span class="nav-text">赋值操作符</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#逗号操作符"><span class="nav-number">1.10.</span> <span class="nav-text">逗号操作符</span></a></li></ol></li></ol></div>
            

          </div>
        </section>
      <!--/noindex-->
      

    </div>
  </aside>


        
      </div>
    </main>

    <footer id="footer" class="footer">
      <div class="footer-inner">
        <div class="copyright" >
  
  &copy;  2015 - 
  <span itemprop="copyrightYear">2016</span>
  <span class="with-love">
    <i class="fa fa-heart"></i>
  </span>
  <span class="author" itemprop="copyrightHolder">Huang SJ</span>
</div>


<div class="powered-by">
  由 <a class="theme-link" href="https://hexo.io">Hexo</a> 强力驱动
</div>

<div class="theme-info">
  主题 -
  <a class="theme-link" href="https://github.com/iissnan/hexo-theme-next">
    NexT.Pisces
  </a>
</div>


        

        
      </div>
    </footer>

    <div class="back-to-top">
      <i class="fa fa-arrow-up"></i>
    </div>
  </div>

  

<script type="text/javascript">
  if (Object.prototype.toString.call(window.Promise) !== '[object Function]') {
    window.Promise = null;
  }
</script>









  



  
  <script type="text/javascript" src="//cdn.staticfile.org/jquery/2.1.3/jquery.min.js"></script>

  
  <script type="text/javascript" src="//cdn.staticfile.org/fastclick/1.0.6/fastclick.min.js"></script>

  
  <script type="text/javascript" src="//cdn.staticfile.org/jquery_lazyload/1.9.7/jquery.lazyload.min.js"></script>

  
  <script type="text/javascript" src="//cdn.staticfile.org/velocity/1.2.1/velocity.min.js"></script>

  
  <script type="text/javascript" src="//cdn.staticfile.org/velocity/1.2.1/velocity.ui.min.js"></script>

  
  <script type="text/javascript" src="//cdn.staticfile.org/fancybox/2.1.5/jquery.fancybox.pack.js"></script>


  


  <script type="text/javascript" src="/js/src/utils.js?v=5.1.0"></script>

  <script type="text/javascript" src="/js/src/motion.js?v=5.1.0"></script>



  
  


  <script type="text/javascript" src="/js/src/affix.js?v=5.1.0"></script>

  <script type="text/javascript" src="/js/src/schemes/pisces.js?v=5.1.0"></script>



  
  <script type="text/javascript" src="/js/src/scrollspy.js?v=5.1.0"></script>
<script type="text/javascript" src="/js/src/post-details.js?v=5.1.0"></script>



  


  <script type="text/javascript" src="/js/src/bootstrap.js?v=5.1.0"></script>



  



  




	




  
  
  <script type="text/javascript">
    // Popup Window;
    var isfetched = false;
    // Search DB path;
    var search_path = "search.xml";
    if (search_path.length == 0) {
      search_path = "search.xml";
    }
    var path = "/" + search_path;
    // monitor main search box;

    function proceedsearch() {
      $("body").append('<div class="popoverlay">').css('overflow', 'hidden');
      $('.popup').toggle();
    }
    // search function;
    var searchFunc = function(path, search_id, content_id) {
      'use strict';
      $.ajax({
        url: path,
        dataType: "xml",
        async: true,
        success: function( xmlResponse ) {
          // get the contents from search data
          isfetched = true;
          $('.popup').detach().appendTo('.header-inner');
          var datas = $( "entry", xmlResponse ).map(function() {
            return {
              title: $( "title", this ).text(),
              content: $("content",this).text(),
              url: $( "url" , this).text()
            };
          }).get();
          var $input = document.getElementById(search_id);
          var $resultContent = document.getElementById(content_id);
          $input.addEventListener('input', function(){
            var matchcounts = 0;
            var str='<ul class=\"search-result-list\">';
            var keywords = this.value.trim().toLowerCase().split(/[\s\-]+/);
            $resultContent.innerHTML = "";
            if (this.value.trim().length > 1) {
              // perform local searching
              datas.forEach(function(data) {
                var isMatch = false;
                var content_index = [];
                var data_title = data.title.trim().toLowerCase();
                var data_content = data.content.trim().replace(/<[^>]+>/g,"").toLowerCase();
                var data_url = decodeURIComponent(data.url);
                var index_title = -1;
                var index_content = -1;
                var first_occur = -1;
                // only match artiles with not empty titles and contents
                if(data_title != '') {
                  keywords.forEach(function(keyword, i) {
                    index_title = data_title.indexOf(keyword);
                    index_content = data_content.indexOf(keyword);
                    if( index_title >= 0 || index_content >= 0 ){
                      isMatch = true;
                      if (i == 0) {
                        first_occur = index_content;
                      }
                    }

                  });
                }
                // show search results
                if (isMatch) {
                  matchcounts += 1;
                  str += "<li><a href='"+ data_url +"' class='search-result-title'>"+ data_title +"</a>";
                  var content = data.content.trim().replace(/<[^>]+>/g,"");
                  if (first_occur >= 0) {
                    // cut out 100 characters
                    var start = first_occur - 20;
                    var end = first_occur + 80;
                    if(start < 0){
                      start = 0;
                    }
                    if(start == 0){
                      end = 50;
                    }
                    if(end > content.length){
                      end = content.length;
                    }
                    var match_content = content.substring(start, end);
                    // highlight all keywords
                    keywords.forEach(function(keyword){
                      var regS = new RegExp(keyword, "gi");
                      match_content = match_content.replace(regS, "<b class=\"search-keyword\">"+keyword+"</b>");
                    });

                    str += "<p class=\"search-result\">" + match_content +"...</p>"
                  }
                  str += "</li>";
                }
              })};
            str += "</ul>";
            if (matchcounts == 0) { str = '<div id="no-result"><i class="fa fa-frown-o fa-5x" /></div>' }
            if (keywords == "") { str = '<div id="no-result"><i class="fa fa-search fa-5x" /></div>' }
            $resultContent.innerHTML = str;
          });
          proceedsearch();
        }
      });}

    // handle and trigger popup window;
    $('.popup-trigger').click(function(e) {
      e.stopPropagation();
      if (isfetched == false) {
        searchFunc(path, 'local-search-input', 'local-search-result');
      } else {
        proceedsearch();
      };
    });

    $('.popup-btn-close').click(function(e){
      $('.popup').hide();
      $(".popoverlay").remove();
      $('body').css('overflow', '');
    });
    $('.popup').click(function(e){
      e.stopPropagation();
    });
  </script>


  

  

  

  


</body>
</html>
